/*------------------------------------------------------------------
[Table of contents]
1. 3rd Part CSS Libraries
2. Global CSS
        2.1 Global Header Logo/Menu CSS	
        2.2 General Section CSS
        2.3 Columns CSS
        2.4 Button CSS
        2.5 Image/Text Slider CSS
3. Home Section CSS
4. Services Section CSS
5. About Section CSS
6. Clients Section CSS
7. News Section CSS
8. Portfolio Section CSS
        8.1 Single Portfolio
9. Pricing Section CSS
10. Team Section CSS
11. Skills Section CSS
12. Milestones Section CSS
13. Blog Page CSS
14. Single Post CSS
        14.1 Tipper CSS
15. Contact Section CSS
16. Footer CSS
17. Responsive CSS
-------------------------------------------------------------------*/


/* ===================================
    1. 3rd Part CSS Libraries
====================================== */

@import url("css/clear.css");
@import url("css/font-awesome.min.css");
@import url("css/sm-clean.css");
@import url("css/owl.carousel.min.css");
@import url("css/owl.theme.default.min.css");
@import url("css/common.css");



/* ===================================
    2. Global CSS
====================================== */

body {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    line-height: 35px;
    font-weight: 400;
    color: #b3b3b3;
    background-color: #ffffff;
    overflow-x: hidden;
}

body a {
    text-decoration: none;
    color: #47ea4e;
    transition: color .3s ease;
}

body a:hover {
    color: #47ea4e; 
}

body p, 
body pre {
    margin-bottom: 13px;
    color: #fff;
}

.site-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.doc-loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #000;
}

.doc-loader img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;    
    left: 50%;
    transform: translate(-50%, -50%);
}

.content-1170 {
    width: 1170px;    
}

.content-960 {
    width: 960px;    
}

.content-570 {
    width: 570px;
}

.pagination-holder {
    margin: 60px 0;
}

.section-wrapper {
    position: relative;
    padding: 200px 0 115px 0;
}

/* ===================================
    2.1 Global Header Logo/Menu CSS
====================================== */
  
.header-holder {
    z-index: 999999 !important;
    background-color: #060606;
    width: 100% !important;
    position: fixed;
    -webkit-transform: translateZ(0);    
}

.sticky-wrapper {
    height: 77px !important;
}


.menu-wrapper {
    width: 98%;
    max-width: 1450px;
    min-height: 77px;
}

.header-logo {
    line-height: 0;
    font-size: 0;
    float: left;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 2.5%;
}

.header-logo img {
    width: 50px;
    height: 50px;
}

.menu-holder {
    float: right;
    max-width: 100%;
}

.toggle-holder {
    display: none;
    right: 10px;
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#toggle:hover {
    cursor: pointer;
}

#toggle div {
    height: 3px;
    margin-bottom: 6px;
    background-color: #fff;
    width: 22px;
}

#toggle .second-menu-line {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;    
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
}

#toggle:hover .second-menu-line {
    -webkit-transform: translate3d(0,0,0) !important;
    transform: translate3d(0,0,0) !important;
}

#toggle.on .second-menu-line {
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
}

#toggle .third-menu-line{        
    margin-bottom: 5px;
}

#header-main-menu {
    display: inline-block;
}

.sm-clean .has-submenu {
    padding-right: 35px !important;
}

.sm-clean li a.menu-item-link {
    cursor: pointer;
    color: #ffffff;
}

.sm-clean a span.sub-arrow {
    right: 3px;
}

.sm-clean a.highlighted {
    padding: 15px;
}

.sm-clean a, 
.sm-clean a:hover, 
.sm-clean a:focus, 
.sm-clean a:active {
    font-size: 14px;
    font-weight: 400;
    transition: color .3s ease, 
        background-color .3s ease;
    padding: 15px;
    letter-spacing: 0.5px;
    color: #fff;
}

.sm-clean ul a, 
.sm-clean ul a:hover, 
.sm-clean ul a:focus, 
.sm-clean ul a:active {    
    font-size: 13px;
    line-height: 15px;
    padding: 10px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.sm-clean {
    background-color: transparent;        
    padding: 15px 0;
}

body .sm-clean a:hover, 
body .main-menu.sm-clean .sub-menu li a:hover, 
body .sm-clean li.active a, 
body .sm-clean li.current-page-ancestor > a, 
body .sm-clean li.current_page_ancestor > a, 
body .sm-clean li.current_page_item > a {
    color: #47ea4e;
}

.sm-clean li {
    margin-right: 10px;
}

.sm-clean li:last-child {
    margin-right: 0;
}

.sm-clean ul {    
    background-color: #000;
}

.sm-clean a.has-submenu {
    padding-right: 24px;
}

.sub-menu a, 
.children a {
    padding-left: 15px !important;
}

.sub-menu .sub-menu, 
.children .children {
    padding-top: 8px;
}

.sub-menu .sub-menu a, 
.children .children a, 
.sub-menu .sub-menu a:hover, 
.children .children a:hover {
    padding-top: 10px !important;
}

@media (min-width: 925px) {

    .sm-clean ul a span.sub-arrow {
        margin-top: 0;
    }
    .sm-clean ul {
        padding: 8px 0;
    }
}

@media (max-width: 925px) {

    .sm-clean ul {
        background-color: #fff;
    }

}

.sm-clean > li:last-child > a, 
.sm-clean > li:last-child > *:not(ul) a, 
.sm-clean > li:last-child > ul, 
.sm-clean > li:last-child > ul > li:last-child > a, 
.sm-clean > li:last-child > ul > li:last-child > *:not(ul) a, 
.sm-clean > li:last-child > ul > li:last-child > ul, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, 
.sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
    border-radius: 5px;
}


/* ===================================
    2.2 General Section CSS
====================================== */

.section {
    position: relative;    
}

.page-title-holder {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #47ea4e;
    width: 285px;
    display: inline-block;
    z-index: 98;
    height: 130px;
}

.page-title-holder:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 60px 0 0;
    border-color: #47ea4e transparent transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
}

.section h3.entry-title {
    font-size: 16px;
    line-height: 149%;
    font-weight: 400;
    word-break: break-word;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 32px;
}

.page .page-content {
    background-color: #fff;
    padding: 75px;    
}

.no-padding .section-wrapper {
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

[data-jarallax-element] {
    z-index: 30 !important;
}

.medium-text {
    color: #000;
    font-size: 60px;
    line-height: 120%;
    font-weight: 700;
    padding-bottom: 35px;
}

.title-description-up {
    font-size: 16px;
    margin-bottom: 0;
    letter-spacing: 2px;
}

.info-text {
    font-size: 22px;
    line-height: 190%;
    color: #000;
}

.info-code-title {
    font-size: 16px;
    color: #000;
    letter-spacing: 2px;
    margin-bottom: 0;
    line-height: 120%;
}

.info-code-content, 
.info-code-content a {
    color: #b3b3b3;
    margin-bottom: 30px;
}

.tp-bullet-title {
    display: none !important;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {    
    transition-duration: 0s;
}

.social {
    display: inline-block;
    font-size: 25px;
    margin-right: 20px;
}

body .social a {
    color: #000 !important;
    transition: all .3s ease;
}

body .social a:hover {
    opacity: 0.5;    
}


/* ===================================
    2.3 Columns CSS
====================================== */

.one_half,  
.one_third,  
.two_third,  
.three_fourth, 
.one_fourth {
    margin-right: 8%;
    float: left;
    position: relative;
    margin-bottom: 30px;
}

.last {
    margin-right: 0 !important;
    clear: right;
}

.one {    
    display: block;
    clear: both;    
    margin-bottom: 30px;
}

.one_half {
    width: 46%;
}

.one_third {
    width: 28%;
}

.two_third {
    width: 64%;
}

.one_fourth {
    width: 19%;
}

.three_fourth {
    width: 73%;
}

.one_half.margin-0 {
    width: 50%;
}

.one_third.margin-0 {
    width: calc(100% / 3);
}

.two_third.margin-0 {
    width: calc(100% / 3 * 2);
}

.one_fourth.margin-0 {
    width: 25%;
}

.three_fourth.margin-0 {
    width: 75%;
}


/* ===================================
    2.4 Button CSS
====================================== */

body a.button {
    display: inline-block;
    color: #fff;
    background-color: #47ea4e;
    text-align: left;
    padding: 10px 40px;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    transition: all .2s linear;
    margin-bottom: 17px;
    border: 2px solid #47ea4e;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    box-sizing: border-box;
}

a.button:hover {
    background-color: transparent;
    color: #47ea4e;
}

a.button-dot {
    color: #fff !important;
    font-size: 16px;
    position: relative;
}

a.button-dot:hover {
    color: #fff;    
}

a.button-dot span {
    transition: .3s;
    display: inline-block;
    margin-left: 50px;
    letter-spacing: 2px;
}

a.button-dot:hover span {
    transform: translateX(-8px);
}

a.button-dot:before {
    content: "";
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    background: transparent;
    border-radius: 90%;
    top: -7px;
    position: absolute;
    transition: .3s;
}

a.button-dot:hover:before {
    width: calc(100% + 30px);
    height: 51px;
    border-radius: 50px;
    top: -18px;
}


/* ===================================
    2.5 Image/Text Slider CSS
====================================== */

.image-slider-wrapper {
    margin-bottom: 20px;
}

.single-post-header-content .image-slider-wrapper {
    margin-bottom: 0;
}

.owl-carousel .owl-stage-outer {
    height: auto !important;
}

.owl-theme .owl-dots {
    padding-top: 25px;
    line-height: 0;
}

.owl-theme .owl-dots .owl-dot span {
    margin: 0;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all .2s ease;
    width: 17px;
    height: 17px;
    border-radius: 90%;
}

.owl-theme .owl-dots .owl-dot {
    border-radius: 90%;
    transition: all .3s ease;
    border: 2px solid #000;
    margin: 3px;
}

.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #fff;
}

.owl-theme .owl-dots .owl-dot.active {
    background-color: #000;
}

.owl-theme .owl-dots .owl-dot.active span {
    background-color: transparent;
}

.text-slider-wrapper {
    font-size: 24px;
    line-height: 35px;
    background-color: #000;
    padding: 130px;
}

.text-slider-header-quotes {
    margin-bottom: 60px;
    background-image: url(images/quotes_image.png);
    background-repeat: no-repeat;
    width: 87px;
    height: 74px;
    background-size: 87px 74px;
}

.text-slider-wrapper .text-slide {
    text-align: left;
    font-size: 28px;
    line-height: 170%;
    overflow: hidden;
}

.text-slider-wrapper .text-slide:after {
    content: "";
    display: table;
    clear: both;
}

.text-slider-wrapper .text-slide-name {
    font-size: 18px;
    line-height: 100%;
    margin: 0 12px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.text-slider-wrapper .text-slide-position {
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 4px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.text-slider-wrapper img.text-slide-img {
    width: 70px !important;
    height: 70px;
    border-radius: 90%;
    display: inline-block;
    margin-right: 25px;
    vertical-align: middle;
}

.text-slide-content {
    margin-bottom: 60px;
}

.text-slider-wrapper .owl-nav {
    position: absolute;
    bottom: 10px;
    right: 0;
}

.text-slider-wrapper .owl-theme .owl-prev {
    background-image: url('images/nav_left.png') !important;
    background-color: transparent !important;
    font-size: 0;
    width: 30px;
    padding: 0;
    height: 30px;
    background-repeat: no-repeat !important;
    background-size: 30px !important;
    transition: .3s;
    opacity: 0.7;
    margin-right: 10px;
}

.text-slider-wrapper .owl-theme .owl-prev:hover {
    opacity: 1;
}

.text-slider-wrapper .owl-theme .owl-next {
    background-image: url('images/nav_right.png') !important;
    background-color: transparent !important;
    font-size: 0;
    width: 30px;
    padding: 0;
    height: 30px;
    background-repeat: no-repeat !important;
    background-size: 30px !important;
    transition: .3s;
    opacity: 0.7;
}

.text-slider-wrapper .owl-theme .owl-next:hover {    
    opacity: 1;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}


/* ===================================
    3. Home Section CSS
====================================== */

#home {    
    background-color: black;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: calc(100vh - 77px);    
    display: flex;
    z-index: 1;
    
}

#home .section-wrapper {
    margin: auto;
    padding: 0;
}

h1.big-text {
    font-size: 8rem;
    color: whitesmoke;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 900;
    z-index: 1;
}

h2.big-text {
    font-size: 3rem;
    color: whitesmoke;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10;
    text-transform: uppercase;
    font-weight: 900;
    z-index: 1;
}

.glitch {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
  }
  .glitch h1 {
    font-size: 8rem;
    color: whitesmoke;
    text-align: center;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 900;
  }
  
  .glitch-window {
    position: absolute;
    top: 0;
    left: -2px;
    width: 100%;
    color: #222222;
    text-shadow: 2px 0 #F9F8F8, -1px 0 yellow, -2px 0 green;
    overflow: hidden;
    animation: crt-me 2500ms infinite linear alternate-reverse;
  }
  
  @-webkit-keyframes crt-me {
    0% {
      clip: rect(31px, 9999px, 94px, 0);
    }
    10% {
      clip: rect(112px, 9999px, 76px, 0);
    }
    20% {
      clip: rect(85px, 9999px, 77px, 0);
    }
    30% {
      clip: rect(27px, 9999px, 97px, 0);
    }
    40% {
      clip: rect(64px, 9999px, 98px, 0);
    }
    50% {
      clip: rect(61px, 9999px, 85px, 0);
    }
    60% {
      clip: rect(99px, 9999px, 114px, 0);
    }
    70% {
      clip: rect(34px, 9999px, 115px, 0);
    }
    80% {
      clip: rect(98px, 9999px, 129px, 0);
    }
    90% {
      clip: rect(43px, 9999px, 96px, 0);
    }
    100% {
      clip: rect(82px, 9999px, 64px, 0);
    }
  }
  
  @keyframes crt-me {
    0% {
      clip: rect(31px, 9999px, 94px, 0);
    }
    10% {
      clip: rect(112px, 9999px, 76px, 0);
    }
    20% {
      clip: rect(85px, 9999px, 77px, 0);
    }
    30% {
      clip: rect(27px, 9999px, 97px, 0);
    }
    40% {
      clip: rect(64px, 9999px, 98px, 0);
    }
    50% {
      clip: rect(61px, 9999px, 85px, 0);
    }
    60% {
      clip: rect(99px, 9999px, 114px, 0);
    }
    70% {
      clip: rect(34px, 9999px, 115px, 0);
    }
    80% {
      clip: rect(98px, 9999px, 129px, 0);
    }
    90% {
      clip: rect(43px, 9999px, 96px, 0);
    }
    100% {
      clip: rect(82px, 9999px, 64px, 0);
    }
  }

/* ===================================
    4. Services Section CSS
====================================== */

#services {
    background-image: url(images/on_black_left.png);
    background-color: #000000;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 100;
}

.service-holder {
    margin: 25px 0;
}

.service-holder:after {
    content: "";
    display: block;
    clear: both;    
}

.service-txt h4 {
    font-size: 46px;
    color: #fff;
    font-weight: 700;
    line-height: 100%;
}

.service-num {
    font-size: 264px;
    font-weight: 700;
    color: #000000;
    text-shadow: -1px 0 #b3b3b3, 
        0 1px #b3b3b3, 
        1px 0 #b3b3b3, 
        0 -1px #b3b3b3;
    line-height: 100%;
    height: 165px;
    overflow: hidden;
    margin-bottom: -10px;
    -webkit-transform: translateZ(0);
}


/* ===================================
    5. About Section CSS
====================================== */

#about {
    background-image: url(images/on_white_right.png);
    background-color: #ffffff;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 100;
}


/* ===================================
    6. Clients Section CSS
====================================== */

#clients {
    background-image: url(images/quote_image_01.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* ===================================
    7. News Section CSS
====================================== */

#news {
    background-image: url(images/on_white_left.png);
    background-color: #ffffff;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto;
}

.blog-holder-scode {
    margin-top: 0;
    width: 1370px;
    transform: translateX(-100px);
    text-align: center;
}

.blog-holder-scode article:nth-of-type(3n) {
    margin-right: 0;
}

.blog-item-holder-scode {
    margin: 30px 0;
    width: 27%;
    display: inline-block;
    margin-right: 8%;
    vertical-align: text-top;
    text-align: left;
}

.blog-item-holder-scode .excerpt {
    margin-top: 20px;
}

.blog-item-holder-scode h4 {
    padding: 0;
    margin: 35px 0;
}

.blog-item-holder-scode h4 a {
    color: #000 !important;
    font-size: 34px;
    line-height: 100%;
    font-weight: 700;
    transition: .3s;
    letter-spacing: -1px;
}

.blog-item-holder-scode h4 a:hover {
    opacity: 0.8;
}

.blog-item-holder-scode .post-thumbnail {
    overflow: hidden;
}

.latest-posts-background-featured-image-holder {
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: .3s;
}

.latest-posts-background-featured-image-holder:hover {
    opacity: 0.8;
    transform: scale(1.1);
}


/* ===================================
    8. Portfolio Section CSS
====================================== */

.grid {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    font-size: 0;
    line-height: 0;
}

.grid-sizer {
    width: 25%;
}

.grid-item {
    float: left;
    font-size: 0;
    line-height: 0;
    width: 100%;
    overflow: hidden;
}

.grid-item.p_one_fourth {
    width: 25%;
}

.grid-item.p_one_half {
    width: 50%;
}

.grid-item.p_three_fourth {
    width: 75%;
}

.grid-item.p_one {
    width: 100%;
}

.grid-item img {
    width: 100% !important;
    height: auto;
    display: block;    
}

.grid-item .entry-holder {
    text-align: center;
    background-color: #fff;
    padding: 50px 20px;
}

.grid-item a.item-link:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.portfolio-text-holder {
    color: #fff;
    position: absolute;
    bottom: 50px;
    left: 50px;
    display: inline-block;
    z-index: 1;
    opacity: 0;
    transition: all .3s ease;
}

.portfolio-title {
    font-size: 30px;
    line-height: 170%;
    margin-bottom: 0;
    font-weight: 700;
    color: #b3b3b3;
}

.portfolio-desc {
    font-size: 14px;
    line-height: 22px;
    color: #b3b3b3;
    letter-spacing: 2px;
    margin-bottom: 0;
}

.grid-item a.item-link:hover:after, 
.grid-item a.item-link:hover .portfolio-text-holder {
    opacity: 1;
}

.portfolio-content h1 {
    font-size: 44px;
    color: #000;
    line-height: 130%;
}

.portfolio-load-content-holder {
    opacity: 0;
    transform: translateY(70px);
    transition: all .5s ease;
    width: 1170px;
    max-width: 75%;
    margin: 0 auto;
}

.portfolio-load-content-holder.show {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-load-content-holder.show.viceversa {
    opacity: 0;
    transform: translateY(70px);
}

.section.no-padding .portfolio-content-wrapper {
    padding: 195px 0 75px 0;
}    

.portfolio-content-wrapper {
    display: none;
}

.portfolio-content-wrapper.show {
    display: block;
}

#portfolio-grid {
    transition: all .5s ease;
    opacity: 1;
    transform: translateY(0px);
}

#portfolio-grid.hide {
    opacity: 0;
    transform: translateY(70px);    
}

.close-icon {
    background-image: url(images/close-left-arrow.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    display: inline-block;
    margin-bottom: 20px;
    background-size: 40px;
    background-position: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    position: absolute;
    left: -100px;
    top: 195px;
}

.close-icon:hover {
    transform: translateX(-5px);
}


/* ===================================
    8.1 Single Portfolio
====================================== */

.portfolio-item-wrapper {
    margin-top: 100px;
    margin-bottom: 50px;
}


/* ===================================
    9. Pricing Section CSS
====================================== */

#pricing {
    background-image: url(images/on_white_right.png);
    background-color: #ffffff;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto;
}

.pricing-table {
    padding-bottom: 20px;
    background-color: #ffffff;
    margin-top: 30px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #000;
    position: relative;
    text-align: left;
}

.pricing-wrapper {
    padding: 0 15%;
}

.pricing-table-title {
    color: #000;
    font-size: 21px;
    font-weight: 500;
    padding: 40px 0;
    margin-bottom: 25px;
}

.pricing-num {
    font-size: 200px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: -1px 0 #b3b3b3, 
        0 1px #b3b3b3, 
        1px 0 #b3b3b3, 
        0 -1px #b3b3b3;
    line-height: 100%;
    margin-bottom: -10px;
    position: absolute;
    top: -50px;
    right: -9px;
    z-index: 1;
}

.pricing-num:before {
    content: "";
    width: 150px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: -1;
}

.pricing-table-price {
    font-size: 100px;
    line-height: 120%;
    color: #47ea4e;
    font-weight: 700;
}

.pricing-table-desc {
    font-size: 16px;
    letter-spacing: 2px;
}

.pricing-table ul {
    padding: 0;
    list-style: none;
    margin-top: 25px;
}

.pricing-table ul li {
    padding: 10px 0;
    color: #000;
}

.pricing-list span.fa {
    color: #47ea4e;
    margin-right: 25px;
}

.pricing-list.included-no, 
.pricing-list.included-no span.fa {
    color: gray;
}

.pricing-list.included-no span.fa:before {
    content: "\f00d";
} 

.pricing-table-content-holder {
    margin-bottom: 40px;
}

.pricing-button {
    text-align: center;
}


/* ===================================
    10. Team Section CSS
====================================== */

#team {
    background-image: url(images/on_black_left.png);
    background-color: #000000;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 100;
}

.member {
    text-align: center;
    margin: 70px 0;
}

.member img {
    display: inline-block;
    vertical-align: middle;
    max-width: 700px;
}

.member-content {
    margin-bottom: 35px;
}

.member-info {
    width: 380px;
    background-color: #fff;
    padding: 65px 110px;
    display: inline-block;
    vertical-align: middle;
    margin-left: -130px;
    text-align: left;
    position: relative;
    z-index: 31;
}

.member-right .member-info {
    margin-left: auto;
    margin-right: -130px;
}

.member-postition {
    margin: 0;
    font-size: 16px;
    letter-spacing: 2px;
}

.member-name {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    line-height: 150%;
    margin-bottom: 35px;
    margin-top: -5px;
    padding: 0;
}

.member-social-holder {
    background: #47ea4e;
    padding: 25px 50px;
    position: absolute;
    bottom: -35px;
    left: -45px;
}

.member-right .member-social-holder {
    left: auto;
    right: -45px;    
}

.member-social-holder .social a {
    color: #fff !important;
}


/* ===================================
    11. Skills Section CSS
====================================== */

.skills-holder {
    position: relative;
    margin: 40px 0;
}

.skill-holder {
    margin-bottom: 30px;
}

.skill-holder:after {
    clear: both;
    display: block;
    content: "";
}

.skill-percent {
    font-size: 48px;
    line-height: 100%;
    font-weight: 100;
    width: 100px;
    display: inline-block;    
    vertical-align: text-top;
}

.skill {
    width: 100%;
    height: 3px;
    background-color: rgba(202, 202, 202, 0.3);
    margin-bottom: 30px;
}

.skill-text {
    display: inline-block;
    width: calc(100% - 145px);
    margin-right: 0;
    float: right;
    vertical-align: text-top;
}

.skill-fill {
    width: 100%;
    height: 10px;
    background-color: #000;
}

.skill-text span {
    font-size: 22px;
    line-height: 35px;
}


/* ===================================
    12. Milestones Section CSS
====================================== */

#millstones {
    background-image: url(images/on_black_left.png);
    background-color: #000000;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto;
}


ul.milestones-holder {
    padding: 0;
    list-style: none;
    margin: 0;
}

li.milestone {
    width: 45%;
    display: inline-block;
    margin: 30px 9% 30px 0;
}

li.milestone:nth-child(2n) {
    margin-right: 0;
}

li.milestone > div {
    display: inline-block;
    vertical-align: text-top;    
}

li.milestone h5 {
    color: #fff;
    max-width: 240px;
    padding-top: 0;
    line-height: 115%;
}

li.milestone .milestone-info-left {
    margin-right: 35px;
    text-align: right;
    width: 30%;
}

li.milestone .milestone-info-right {
    width: 62%;
}

p.milestone-num {
    font-size: 80px;
    line-height: 100%;
    font-weight: 700;
    position: relative;
    margin-bottom: 0;
    color: #000000;
    text-shadow: -1px 0 #b3b3b3, 
        0 1px #b3b3b3, 
        1px 0 #b3b3b3, 
        0 -1px #b3b3b3;
}



/* ===================================
    13. Blog Page CSS
====================================== */

body.blog {
    background-color: #fff;
}

.blog .site-content {    
    background-color: #fff;
}

.blog h1.entry-title {
    text-align: center;
    display: table;
    margin: 50px auto;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    color: #fff;
    background-color: #f1576b;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
}

.blog-holder {
    width: 1170px;
    max-width: 100%;    
}

.blog-item-holder {
    margin: 120px 0;
    text-align: center;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-item-wrapper {
    display: inline-block;
}

.blog-item-holder .excerpt {
    width: 700px;
    margin: 0 auto;
    max-width: 100%;
    margin-bottom: 30px;
    margin-top: 25px;
}

.blog-item-holder.has-post-thumbnail {
    width: 1170px;
    max-width: 100%;
}

.blog-item-holder.has-post-thumbnail .excerpt {
    width: 100%;
    max-width: 100%;
    margin-bottom: 60px;
}

.blog-item-holder .post-thumbnail {
    max-width: 590px;
    overflow: hidden;
    line-height: 0;
}

.post-thumbnail-image {
    transition: .3s;
}

.post-thumbnail-image:hover {
    opacity: 0.8;    
}

.blog-item-holder.has-post-thumbnail:nth-of-type(2n+1) .post-thumbnail {
    float: left;
    text-align: right;
}

.blog-item-holder.has-post-thumbnail:nth-of-type(2n+1) .entry-holder {
    float: left;
    position: relative;
    z-index: 31;
}

.blog-item-holder.has-post-thumbnail:nth-of-type(2n) .post-thumbnail {
    float: right;
    text-align: left;
    margin-right: 0;
}

.blog-item-holder.has-post-thumbnail:nth-of-type(2n) .entry-holder {
    float: right;    
    position: relative;
    z-index: 31;
}

.blog-item-holder.has-post-thumbnail .entry-holder {
    width: 430px;
    text-align: left;
    padding: 0 75px;
    background: #fff;
}

.blog-item-holder.has-post-thumbnail.is-smaller .entry-holder {
    margin-top: 40px;
}

.blog-item-holder h2.entry-title {
    display: block;
    font-weight: 700;
    font-size: 42px;
    line-height: 46px;
    padding-top: 0;
    word-break: break-word;
    letter-spacing: -2px;
}

.blog-item-holder h2.entry-title a {
    color: #000 !important;
    transition: .2s;
}

.blog-item-holder h2.entry-title a:hover {
    opacity: 0.8;
}

.blog-item-holder .cat-links ul {
    list-style: none;
    padding: 0;
    display: inline-block;
}

.blog-item-holder .cat-links ul li {
    display: inline-block;
}

.blog-item-holder .cat-links ul li a:after {
    content: ",";
    padding-right: 5px;
}

.blog-item-holder .cat-links ul li:last-child a:after {
    display: none
}

.blog-item-holder .cat-links ul a {
    color: #000000 !important;
    transition: .2s;
}

.blog-item-holder .cat-links ul a:hover {
    opacity: 0.8;
}

.blog-item-holder .entry-date.published, 
.blog-item-holder .cat-links {
    display: inline-block;
    font-size: 12px;
    margin-top: -10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog-item-holder .cat-links:after {   
    content: "\2022";
    display: inline-block;
    margin: 0 7px 0 10px;
}

.blog-item-holder a.item-button {
    display: inline-block;
    color: #fff;
    background-color: #47ea4e;
    text-align: left;
    padding: 10px 40px;    
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    transition: all .2s linear;
    margin-bottom: 17px;
    border: 2px solid #47ea4e;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    box-sizing: border-box;
    margin-bottom: 0;
}

.blog-item-holder a.item-button:hover {
    background-color: #fff;
    color: #47ea4e;
}



/* ===================================
    14. Single Post CSS
====================================== */

.single .site-content {
    background-color: #111;
}

.single-post-header-content {
    margin-bottom: 55px;
}

.single .post-info-wrapper {
    margin-bottom: 30px;
    font-size: 15px;
    color: #939393;
    width: 150px;
    margin-right: 200px;
    float: left;
    padding-top: 7px;
}

.single .post-info-wrapper a {
    color: #939393 !important;
}

.single .sticky-spacer {
    position: static !important;
    margin-bottom: 0 !important;
    max-width: 150px;
}

.single .entry-info {
    position: relative;
}

.single .entry-info > div {
    margin-bottom: 20px;
}

.single .entry-info div:last-child {
    margin-bottom: 0;
}

.single .entry-info .cat-links {
    margin-top: 5px;
}

.single .entry-info:after {
    content: "";
    width: 5px;
    height: 100%;
    position: absolute;
    right: -20px;
    top: -5px;
    background-color: #47ea4e;
}

.single .post-info-wrapper .text-holder {
    font-size: 10px;
    color: #000;
    letter-spacing: 2px;
    margin-bottom: 0;
    line-height: 15px;
}

.single article {
    padding-top: 75px;
}

.single h1.entry-title {
    font-weight: 700;
    font-size: 48px;
    line-height: 115%;
    margin-bottom: 10px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    width: 720px;
    margin: 0 auto 30px;
    max-width: 100%;
    color: #fff;
    padding-top: 0;
}

.single .entry-info div:last-of-type:after {
    display: none;
}

.single .entry-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 150%;
}

.single .entry-info ul li {
    display: inline-block;
}

.single .entry-info .cat-links li:after {
    content: ",";
    padding-right: 5px;
}

.single .entry-info .cat-links ul li:last-child:after {
    display: none;
}

.single-post-featured-image {
    text-align: center;
    padding-bottom: 40px;
    width: 1300px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.single .entry-content {
    font-size: 15px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}

.single .nav-links {
    margin-top: 35px;
    margin-bottom: 50px;
}

.single .nav-links > a {
    background-color: #47ea4e;
    padding: 26px 30px 24px;
    margin: 0;
    display: inline;
    color: #fff !important;
    transition: .3s;
}

.single .nav-links > a:hover {
    background-color: #73f473;
}


/* ===================================
   14.1 Tipper CSS
====================================== */

.tipper {
    width: 100%;
    min-height: 1px;
    position: absolute;
    top: -999px;
    left: -999px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s linear;
    max-width: 500px;
}

.tipper-visible {
    opacity: 1;
}

.tipper-content {
    background: #111;
    border-radius: 3px;
    color: #fff;
    display: block;
    float: left;
    font-size: 22px;
    margin: 0;
    padding: 10px 15px;
    position: relative;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
}

.tipper-caret {
    width: 0;
    height: 0;
    content: '';
    display: block;
    margin: 0;
    position: absolute;
}

.tipper-left .tipper-content {
    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.35);
}


/* ===================================
    15. Contact Section CSS
====================================== */

.contact-form {
    max-width: 100%;
    margin: 0 auto;
    font-size: 22px;
    color: #000;
}

.contact-form p {
    margin-bottom: 0 !important;
}

.contact-form input[type=text], 
.contact-form input[type=email], 
.contact-form textarea {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    border: 0;
    font-size: 15px;
    padding: 5px 0;
    width: 100%;
    line-height: 25px;
    color: #000;
    margin-bottom: 35px;
    text-indent: 10px;
    background-color: transparent;
    border-bottom: 3px solid;
}

.contact-form textarea {
    height: 150px;
}

.contact-form input[type=text]::placeholder, 
.contact-form input[type=email]::placeholder, 
.contact-form textarea::placeholder {
    font-family: 'Rubik', sans-serif;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
    opacity: 1;
}

.contact-form input[type=text]:ms-input-placeholder, 
.contact-form input[type=email]:ms-input-placeholder, 
.contact-form textarea:ms-input-placeholder {
    font-family: 'Rubik', sans-serif;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;    
}

.contact-form input[type=text]::ms-input-placeholder, 
.contact-form input[type=email]::ms-input-placeholder, 
.contact-form textarea::ms-input-placeholder {
    font-family: 'Rubik', sans-serif;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
}

.contact-form input[name="your-name"] {
    margin-top: 0;    
}

.contact-submit-holder {
    position: relative;
    margin-bottom: 25px;
}

.contact-form input[type=submit] {
    color: #fff;
    background-color: #47ea4e;
    text-align: center;
    padding: 10px 40px;    
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    transition: all .2s linear;
    margin-bottom: 17px;
    display: block;
    width: 100%;
    line-height: 35px;
    border: 2px solid #47ea4e;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    box-sizing: border-box;
}

.contact-form input[type=submit]:hover {
    background-color: #fff;
    color: #47ea4e;
}


/* ===================================
    16. Footer CSS
====================================== */

footer a {
    color: #fff;
}

footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.footer {
    font-size: 16px;
    line-height: 36px;
    padding-top: 75px;
    padding-bottom: 60px;
    clear: both;
    color: #fff;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-color: #111;
}

.footer-content {    
    width: 900px;
}

.footer-logo img {
    width: 88px;
    height: 88px;
    margin-bottom: 30px;
}

.footer-logo-divider {
    position: relative;
    height: 60px;
    margin-bottom: 30px;
}

.footer-logo-divider:before {
    content: "";
    width: 2px;
    height: 60px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
}

.footer-mail {
    font-size: 46px;
    margin-bottom: 35px;
    line-height: 100%;
    font-weight: 700;
}

.footer-social-divider {
    position: relative;
    height: 62px;
    margin-bottom: 35px;
}

footer .footer-social-divider:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 2px;
    background-color: white;
    left: calc(50% - 150px);
    bottom: 0;
}

footer .footer-social-divider:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 60px;
    background-color: white;
    left: calc(50% - 1px);
    top: 0;
}

.social-holder {
    margin-bottom: 35px;
}

.social-holder a {
    font-size: 28px;
    margin-right: 25px;
}

.social-holder a:last-of-type {
    margin: 0;
}



/* ===================================
    17. Responsive CSS
====================================== */


@media screen and (max-width: 1600px) { 

    .content-1170, 
    .content-960, 
    .content-570 {
        max-width: 100%;
    }               

}

@media screen and (max-width: 1366px) { 

    .blog-holder-scode {
        width: 100%;
        transform: none;
    }

    .blog-item-holder-scode {
        width: 29%;
        margin-right: 5%;
    }

    .blog-item-holder-scode h4 a {
        font-size: 32px;
    }
}

@media screen and (max-width: 1360px) { 

    .blog-item-holder.has-post-thumbnail .entry-holder {
        width: 340px;
    }

}

@media screen and (max-width: 1270px) {

    .member-info {    
        padding: 65px 80px;    
    }

}

@media screen and (max-width: 1220px) {

    blockquote {    
        font-size: 17px;
        line-height: 28px;    
    }    

}

@media screen and (max-width: 1024px) {   

    .sm-clean li {
        margin-right: 8px;
    }

    .sm-clean a, 
    .sm-clean a:hover, 
    .sm-clean a:focus, 
    .sm-clean a:active, 
    .sm-clean a.highlighted {
        padding: 15px 8px;
    }

    .blog-holder, 
    .footer-content {
        width: 100%;
    }            

    .single .post-info-wrapper {
        width: 100%;
        text-align: center;
        float: none;
    }

    .single .sticky-spacer {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    .single .entry-info {
        position: relative !important;
        top: 0 !important;
    }

    .single .entry-info:after {
        display: none;
    }

    .single .sticky-spacer .entry-info > div {
        display: inline-block;
        margin: 10px 25px;
    }

    .single .entry-content {
        float: center;
        margin-left: auto;
        margin-right: auto;   
        max-width: 100%;     
        text-align: center;
    }

    .one_half,  
    .one_third,  
    .two_third,  
    .one_fourth,
    .three_fourth {
        margin-right: 6%;   
    }

    .one_half {
        width: 47%;
    }

    .one_third {
        width: calc(88% / 3);
    }

    .two_third {
        width: calc(194% / 3);
    }

    .one_fourth {
        width: calc(82% / 4);
    }

    .three_fourth {
        width: calc(318% / 4);
    }

    .section h3.entry-title {
        margin-bottom: 0 !important;        
    }        

    .sticky-spacer {
        height: auto !important;
        width: auto !important;
        position: relative !important;
    }

    .blog-item-holder-scode {
        width: 27%;
    }

    .latest-posts-background-featured-image-holder {
        height: 350px;
    }                

    .pricing-wrapper {
        padding: 0 10%;
    }

    li.milestone {
        text-align: center;
    }

    li.milestone .milestone-info-left {
        margin: 0 auto;
        display: block;
        width: 100%;
        text-align: center;
    }

    li.milestone h5 {
        max-width: 100%;
    }

}

@media screen and (max-width: 1020px) {   

    #header-main-menu {
        padding-bottom: 70px;
    }

    .menu-wrapper {
        width: 100%;
    }

    .main-menu ul {
        width: 12em;
    }        

    .toggle-holder {
        display: block;
    }

    .sm-clean li {
        margin: 0 auto !important;
        border: 0;
    }

    .sm-clean a.has-submenu {
        display: inline-block;
    }

    .menu-holder {
        position: fixed;
        text-align: center;
        background-color: #000000;
        right: -100%;
        top: 77px;
        transition: right .3s ease;
        height: 100%;
        width: 300px;
        overflow: auto;
        max-width: 100%;
    }    

    .header-holder {
        -webkit-transform: none;
    }

    .menu-holder.show {
        right: 0;
    }

    .sm-clean ul ul a, 
    .sm-clean ul ul a:hover, 
    .sm-clean ul ul a:focus, 
    .sm-clean ul ul a:active {
        border: none;
    }

    .sm-clean a span.sub-arrow {
        background: transparent;
    }

    .sm-clean a, 
    .sm-clean a:hover, 
    .sm-clean a:focus, 
    .sm-clean a:active, 
    .sm-clean a.highlighted {
        padding: 10px 18px 10px 18px;
        padding-left: 10px !important;
        margin-bottom: 5px;
    }     

    h1.big-text {
        text-align: center;
        font-size: 60px;        
    }

    .section-wrapper {
        padding-bottom: 70px;
    }

    .single article {
        padding-top: 35px;
    }

    .single h1.entry-title {    
        font-size: 38px;
        line-height: 44px;
    }       

    .single-post-header-content {
        margin-bottom: 35px;
    }

    .single-post .right-content-wrapper {
        float: none;
        width: 100%;
    }

    .tipper {
        display: none !important;
    }

    .blog-item-holder {
        width: 100%;
        padding: 5px 0;
        float: none;
    }

    .blog-item-wrapper {
        display: block;
    }

    .blog-item-holder:first-of-type {
        margin-top: 30px;
    }

    .blog-item-holder h2.entry-title {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-item-holder.has-post-thumbnail .excerpt {
        max-width: 700px;
        margin-bottom: 30px;
    }

    .blog-item-holder .post-thumbnail {
        float: none !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 30px;
        width: 100%;        
        margin-top: 0;
    }

    .blog-item-holder.has-post-thumbnail .entry-holder {
        float: none !important;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        width: 100%;
        padding: 0;
    }    

    .blog-item-holder .cat-links ul {
        margin: 0;
    }

    .blog-item-holder a.button {
        margin-bottom: 30px;
    }

    .footer {
        padding-top: 30px;
    }

    .form-submit {
        padding-bottom: 20px;
    }

    .one_half, 
    .one_third, 
    .one_fourth, 
    .two_third, 
    .three_fourth {
        width: 100% !important;
        float: none;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center;
    }

    .margin-0 img {
        width: 100% !important;
    }

    .grid-item, 
    .grid-sizer {
        width: 100% !important;
    } 

    .button-holder {
        text-align: center !important;
    }

    .service-holder {
        text-align: center;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    [data-jarallax-element] {
        transform: none !important;
    }

    .no-page-title .section-wrapper {
        padding: 65px 0 35px 0;
    }

    .text-slider-wrapper {
        padding: 10%;
    }

    .blog-item-holder-scode {
        display: block;  
        text-align: center; 
        width: 100%;
        margin-left: auto;
        margin-right: auto !important;
        max-width: 400px;         
    }

    .medium-text {
        font-size: 40px;
        line-height: 105%;
        padding-top: 10px;
    }

    .portfolio-load-content-holder {
        max-width: 90%;
    }

    .close-icon {
        top: 120px;
        right: -10px;
        left: auto;
    }

    .pricing-table {
        margin-bottom: 100px;
    }

    .member {
        margin: 35px auto;
        max-width: 80%;
    }

    .member img {
        display: block;
        margin: 0 auto;
        width: 100% !important;
    }

    .member-info {
        display: block;
        margin: 0 auto !important;
        width: 80%;
        padding: 10%;
    }

    .member-social-holder {
        right: 0 !important;
        left: 0 !important;
        width: 100%;
        text-align: center;
        padding: 25px 0;
    }

    .skill-percent {
        display: block;
        width: 100%;
        font-size: 40px;
    }

    .skill-text {
        display: block;
        width: 100%;
    }

    .skill-text span {
        margin-bottom: 10px;
        display: block;
    }

    li.milestone {
        width: 100%;
        margin-bottom: 60px;
        display: block;
        max-width: 350px;
        margin-left: auto !important;
        margin-right: auto !important;
    }  

    li.milestone:last-child {
        margin-bottom: 0;
    }

    li.milestone > div {
        width: 100% !important;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    p.milestone-num {
        font-size: 65px;
    }

    li.milestone h5 {
        max-width: 100%;
        margin-top: 20px;
    }

    .portfolio-item-wrapper {
        margin-top: 50px;
    }

    .single .nav-links {     
        transform: none;        
        margin-top: 50px;        
        text-align: center;
    }

}

@media screen and (max-width: 767px) {    

    .page-title-holder {
        height: 100px;
    }   

    .section h3.entry-title {
        margin-top: 18px;
    }

    .service-holder {
        margin: 0 auto;
    }

    .section-wrapper {
        padding: 130px 0 30px 0;
    }

    .page-title-holder:after {
        border-width: 100px 60px 0 0;
    }  

    .blog-item-holder h2.entry-title {
        font-size: 34px;
        line-height: 38px;
    }

    .footer-mail {
        font-size: 30px;
    }

    blockquote {
        max-width: 100%;
        margin-top: 25px;
    }

    blockquote:before {
        position: relative;
        left: 0;
        font-size: 180px;
        line-height: 37px;
        top: 0;
    }    

    .blog-item-holder-scode .post-thumbnail {
        margin-top: 70px;
    }

    .blog-holder-scode > article:first-of-type .post-thumbnail {
        margin-top: 0;   
    }

    .latest-posts-background-featured-image-holder {
        height: 300px;
    }

    .member {
        max-width: 100%;
    }

    .member-name {
        font-size: 35px;
    }

    .member-content {
        font-size: 16px;
        line-height: 170%;
        margin-bottom: 50px;
    }

    .member-postition {
        font-size: 13px;
    }   

    .text-slider-wrapper {
        width: 80%;
    }

    .text-slider-wrapper .text-slide {
        font-size: 20px;
    }

    .text-slider-wrapper img.text-slide-img {
        display: block;
        margin-bottom: 10px;
    }

    .text-slider-wrapper .text-slide-name {
        display: block;
        margin-bottom: 5px;
    }

    .text-slider-wrapper .text-slide-position {
        display: block;
        font-size: 14px;
        line-height: 125%;
    }

}

@media screen and (max-width: 750px) {

    .blog-item-holder .entry-holder {
        max-width: 100%;
    }

}

@media screen and (max-width: 650px) {

    .blog-item-holder .entry-date.published, 
    .blog-item-holder .cat-links, 
    .single .entry-info div, 
    .single .entry-info .cat-links ul {
        display: block;
    }

    .blog-item-holder .entry-date.published:after, 
    .single .entry-info div:after {
        display: none;
    }    

    h1.big-text {
        text-align: center;
        font-size: 40px;        
    }

}


@media screen and (max-width: 400px) { 

   .page-title-holder {
       width: 200px;
   }

    .footer-mail {
        font-size: 28px;
    }

}

@font-face {
    font-family: "Martix Code NFI";
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
    src: url("https://raw.githubusercontent.com/UstymUkhman/UstymUkhman/master/public/fonts/matrix-code/Matrix-Code-NFI.otf?raw=true") format("opentype"), url("https://raw.githubusercontent.com/UstymUkhman/UstymUkhman/master/public/fonts/matrix-code/Matrix-Code-NFI.ttf?raw=true") format("truetype");
  }
  * {
    margin: 0;
    padding: 0;
  }
  
  
  div.code-container {
    background-color: transparent;
    position: absolute;
    margin: auto;
    height: 100px;
    width: 100%;
    top: -5%;
    font-family: "Martix Code NFI";
    font-size: 30px;
    color: #00cc00;
    z-index: -999;
  }
  div.code-container div#matrix-code {
    width: 100%;
    height: 100px;
  }
  div.code-container div#matrix-code p.code-column {
    position: absolute;
    height: auto;
    width: 40px;
    text-align: center;
    line-height: 25px;
  }
  div.code-container div#matrix-code p.code-column.column-size-12 {
    margin-left: -0.5%;
    z-index: 1;
  }
  div.code-container div#matrix-code p.code-column.column-size-25 {
    margin-left: 0%;
    z-index: 2;
  }
  div.code-container div#matrix-code p.code-column.column-size-60 {
    margin-left: -0.75%;
    z-index: 3;
  }
  div.code-container div#matrix-code p.code-column span {
    text-shadow: 0 -12px 10px #00cc00;
    display: block;
    width: auto;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(-n+5) {
    opacity: 0.3;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+6):nth-child(-n+10) {
    opacity: 0.42;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+11):nth-child(-n+15) {
    opacity: 0.54;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+16):nth-child(-n+25) {
    opacity: 0.66;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+26):nth-child(-n+35) {
    opacity: 0.78;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+36):nth-child(-n+40) {
    opacity: 0.9;
  }
  div.code-container div#matrix-code p.code-column span:nth-child(n+41) {
    opacity: 1;
  }
  div.code-container div#matrix-code p.code-column span:nth-last-child(3) {
    color: #88ff88;
  }
  div.code-container div#matrix-code p.code-column span:nth-last-child(2) {
    color: #bbffbb;
  }
  div.code-container div#matrix-code p.code-column span:nth-last-child(1) {
    color: #ddffdd;
  }
  div.code-container div#matrix-code p.code-column span.code-size-12 {
    font-size: 12px;
    height: 12px;
  }
  div.code-container div#matrix-code p.code-column span.code-size-25 {
    font-size: 25px;
    height: 25px;
  }
  div.code-container div#matrix-code p.code-column span.code-size-60 {
    font-size: 60px;
    height: 60px;
  }
  div.code-container div#matrix-code p.code-0 {
    position: absolute;
    left: 0%;
    -webkit-animation: drop 14415ms linear 404ms infinite;
            animation: drop 14415ms linear 404ms infinite;
  }
  div.code-container div#matrix-code p.code-1 {
    position: absolute;
    left: 1%;
    -webkit-animation: drop 7768ms linear 862ms infinite;
            animation: drop 7768ms linear 862ms infinite;
  }
  div.code-container div#matrix-code p.code-2 {
    position: absolute;
    left: 2%;
    -webkit-animation: drop 13955ms linear 45ms infinite;
            animation: drop 13955ms linear 45ms infinite;
  }
  div.code-container div#matrix-code p.code-3 {
    position: absolute;
    left: 3%;
    -webkit-animation: drop 14974ms linear 593ms infinite;
            animation: drop 14974ms linear 593ms infinite;
  }
  div.code-container div#matrix-code p.code-4 {
    position: absolute;
    left: 4%;
    -webkit-animation: drop 14826ms linear 328ms infinite;
            animation: drop 14826ms linear 328ms infinite;
  }
  div.code-container div#matrix-code p.code-5 {
    position: absolute;
    left: 5%;
    -webkit-animation: drop 6638ms linear 307ms infinite;
            animation: drop 6638ms linear 307ms infinite;
  }
  div.code-container div#matrix-code p.code-6 {
    position: absolute;
    left: 6%;
    -webkit-animation: drop 11068ms linear 159ms infinite;
            animation: drop 11068ms linear 159ms infinite;
  }
  div.code-container div#matrix-code p.code-7 {
    position: absolute;
    left: 7%;
    -webkit-animation: drop 9807ms linear 327ms infinite;
            animation: drop 9807ms linear 327ms infinite;
  }
  div.code-container div#matrix-code p.code-8 {
    position: absolute;
    left: 8%;
    -webkit-animation: drop 14934ms linear 842ms infinite;
            animation: drop 14934ms linear 842ms infinite;
  }
  div.code-container div#matrix-code p.code-9 {
    position: absolute;
    left: 9%;
    -webkit-animation: drop 10901ms linear 998ms infinite;
            animation: drop 10901ms linear 998ms infinite;
  }
  div.code-container div#matrix-code p.code-10 {
    position: absolute;
    left: 10%;
    -webkit-animation: drop 3463ms linear 254ms infinite;
            animation: drop 3463ms linear 254ms infinite;
  }
  div.code-container div#matrix-code p.code-11 {
    position: absolute;
    left: 11%;
    -webkit-animation: drop 8799ms linear 530ms infinite;
            animation: drop 8799ms linear 530ms infinite;
  }
  div.code-container div#matrix-code p.code-12 {
    position: absolute;
    left: 12%;
    -webkit-animation: drop 11358ms linear 234ms infinite;
            animation: drop 11358ms linear 234ms infinite;
  }
  div.code-container div#matrix-code p.code-13 {
    position: absolute;
    left: 13%;
    -webkit-animation: drop 12426ms linear 364ms infinite;
            animation: drop 12426ms linear 364ms infinite;
  }
  div.code-container div#matrix-code p.code-14 {
    position: absolute;
    left: 14%;
    -webkit-animation: drop 13323ms linear 724ms infinite;
            animation: drop 13323ms linear 724ms infinite;
  }
  div.code-container div#matrix-code p.code-15 {
    position: absolute;
    left: 15%;
    -webkit-animation: drop 3983ms linear 117ms infinite;
            animation: drop 3983ms linear 117ms infinite;
  }
  div.code-container div#matrix-code p.code-16 {
    position: absolute;
    left: 16%;
    -webkit-animation: drop 9295ms linear 697ms infinite;
            animation: drop 9295ms linear 697ms infinite;
  }
  div.code-container div#matrix-code p.code-17 {
    position: absolute;
    left: 17%;
    -webkit-animation: drop 11191ms linear 967ms infinite;
            animation: drop 11191ms linear 967ms infinite;
  }
  div.code-container div#matrix-code p.code-18 {
    position: absolute;
    left: 18%;
    -webkit-animation: drop 3425ms linear 301ms infinite;
            animation: drop 3425ms linear 301ms infinite;
  }
  div.code-container div#matrix-code p.code-19 {
    position: absolute;
    left: 19%;
    -webkit-animation: drop 9329ms linear 29ms infinite;
            animation: drop 9329ms linear 29ms infinite;
  }
  div.code-container div#matrix-code p.code-20 {
    position: absolute;
    left: 20%;
    -webkit-animation: drop 1572ms linear 781ms infinite;
            animation: drop 1572ms linear 781ms infinite;
  }
  div.code-container div#matrix-code p.code-21 {
    position: absolute;
    left: 21%;
    -webkit-animation: drop 4535ms linear 743ms infinite;
            animation: drop 4535ms linear 743ms infinite;
  }
  div.code-container div#matrix-code p.code-22 {
    position: absolute;
    left: 22%;
    -webkit-animation: drop 6754ms linear 351ms infinite;
            animation: drop 6754ms linear 351ms infinite;
  }
  div.code-container div#matrix-code p.code-23 {
    position: absolute;
    left: 23%;
    -webkit-animation: drop 13938ms linear 768ms infinite;
            animation: drop 13938ms linear 768ms infinite;
  }
  div.code-container div#matrix-code p.code-24 {
    position: absolute;
    left: 24%;
    -webkit-animation: drop 12037ms linear 2ms infinite;
            animation: drop 12037ms linear 2ms infinite;
  }
  div.code-container div#matrix-code p.code-25 {
    position: absolute;
    left: 25%;
    -webkit-animation: drop 1206ms linear 860ms infinite;
            animation: drop 1206ms linear 860ms infinite;
  }
  div.code-container div#matrix-code p.code-26 {
    position: absolute;
    left: 26%;
    -webkit-animation: drop 8194ms linear 572ms infinite;
            animation: drop 8194ms linear 572ms infinite;
  }
  div.code-container div#matrix-code p.code-27 {
    position: absolute;
    left: 27%;
    -webkit-animation: drop 6865ms linear 936ms infinite;
            animation: drop 6865ms linear 936ms infinite;
  }
  div.code-container div#matrix-code p.code-28 {
    position: absolute;
    left: 28%;
    -webkit-animation: drop 8543ms linear 658ms infinite;
            animation: drop 8543ms linear 658ms infinite;
  }
  div.code-container div#matrix-code p.code-29 {
    position: absolute;
    left: 29%;
    -webkit-animation: drop 9748ms linear 627ms infinite;
            animation: drop 9748ms linear 627ms infinite;
  }
  div.code-container div#matrix-code p.code-30 {
    position: absolute;
    left: 30%;
    -webkit-animation: drop 11852ms linear 109ms infinite;
            animation: drop 11852ms linear 109ms infinite;
  }
  div.code-container div#matrix-code p.code-31 {
    position: absolute;
    left: 31%;
    -webkit-animation: drop 9535ms linear 817ms infinite;
            animation: drop 9535ms linear 817ms infinite;
  }
  div.code-container div#matrix-code p.code-32 {
    position: absolute;
    left: 32%;
    -webkit-animation: drop 8796ms linear 883ms infinite;
            animation: drop 8796ms linear 883ms infinite;
  }
  div.code-container div#matrix-code p.code-33 {
    position: absolute;
    left: 33%;
    -webkit-animation: drop 10640ms linear 57ms infinite;
            animation: drop 10640ms linear 57ms infinite;
  }
  div.code-container div#matrix-code p.code-34 {
    position: absolute;
    left: 34%;
    -webkit-animation: drop 12693ms linear 753ms infinite;
            animation: drop 12693ms linear 753ms infinite;
  }
  div.code-container div#matrix-code p.code-35 {
    position: absolute;
    left: 35%;
    -webkit-animation: drop 7169ms linear 142ms infinite;
            animation: drop 7169ms linear 142ms infinite;
  }
  div.code-container div#matrix-code p.code-36 {
    position: absolute;
    left: 36%;
    -webkit-animation: drop 8684ms linear 31ms infinite;
            animation: drop 8684ms linear 31ms infinite;
  }
  div.code-container div#matrix-code p.code-37 {
    position: absolute;
    left: 37%;
    -webkit-animation: drop 14316ms linear 273ms infinite;
            animation: drop 14316ms linear 273ms infinite;
  }
  div.code-container div#matrix-code p.code-38 {
    position: absolute;
    left: 38%;
    -webkit-animation: drop 13518ms linear 750ms infinite;
            animation: drop 13518ms linear 750ms infinite;
  }
  div.code-container div#matrix-code p.code-39 {
    position: absolute;
    left: 39%;
    -webkit-animation: drop 10743ms linear 838ms infinite;
            animation: drop 10743ms linear 838ms infinite;
  }
  div.code-container div#matrix-code p.code-40 {
    position: absolute;
    left: 40%;
    -webkit-animation: drop 14111ms linear 396ms infinite;
            animation: drop 14111ms linear 396ms infinite;
  }
  div.code-container div#matrix-code p.code-41 {
    position: absolute;
    left: 41%;
    -webkit-animation: drop 1137ms linear 243ms infinite;
            animation: drop 1137ms linear 243ms infinite;
  }
  div.code-container div#matrix-code p.code-42 {
    position: absolute;
    left: 42%;
    -webkit-animation: drop 9995ms linear 803ms infinite;
            animation: drop 9995ms linear 803ms infinite;
  }
  div.code-container div#matrix-code p.code-43 {
    position: absolute;
    left: 43%;
    -webkit-animation: drop 8405ms linear 850ms infinite;
            animation: drop 8405ms linear 850ms infinite;
  }
  div.code-container div#matrix-code p.code-44 {
    position: absolute;
    left: 44%;
    -webkit-animation: drop 13655ms linear 840ms infinite;
            animation: drop 13655ms linear 840ms infinite;
  }
  div.code-container div#matrix-code p.code-45 {
    position: absolute;
    left: 45%;
    -webkit-animation: drop 5896ms linear 802ms infinite;
            animation: drop 5896ms linear 802ms infinite;
  }
  div.code-container div#matrix-code p.code-46 {
    position: absolute;
    left: 46%;
    -webkit-animation: drop 9653ms linear 701ms infinite;
            animation: drop 9653ms linear 701ms infinite;
  }
  div.code-container div#matrix-code p.code-47 {
    position: absolute;
    left: 47%;
    -webkit-animation: drop 14238ms linear 511ms infinite;
            animation: drop 14238ms linear 511ms infinite;
  }
  div.code-container div#matrix-code p.code-48 {
    position: absolute;
    left: 48%;
    -webkit-animation: drop 3344ms linear 465ms infinite;
            animation: drop 3344ms linear 465ms infinite;
  }
  div.code-container div#matrix-code p.code-49 {
    position: absolute;
    left: 49%;
    -webkit-animation: drop 10953ms linear 330ms infinite;
            animation: drop 10953ms linear 330ms infinite;
  }
  div.code-container div#matrix-code p.code-50 {
    position: absolute;
    left: 50%;
    -webkit-animation: drop 6435ms linear 390ms infinite;
            animation: drop 6435ms linear 390ms infinite;
  }
  div.code-container div#matrix-code p.code-51 {
    position: absolute;
    left: 51%;
    -webkit-animation: drop 12111ms linear 904ms infinite;
            animation: drop 12111ms linear 904ms infinite;
  }
  div.code-container div#matrix-code p.code-52 {
    position: absolute;
    left: 52%;
    -webkit-animation: drop 9314ms linear 531ms infinite;
            animation: drop 9314ms linear 531ms infinite;
  }
  div.code-container div#matrix-code p.code-53 {
    position: absolute;
    left: 53%;
    -webkit-animation: drop 8793ms linear 682ms infinite;
            animation: drop 8793ms linear 682ms infinite;
  }
  div.code-container div#matrix-code p.code-54 {
    position: absolute;
    left: 54%;
    -webkit-animation: drop 10963ms linear 395ms infinite;
            animation: drop 10963ms linear 395ms infinite;
  }
  div.code-container div#matrix-code p.code-55 {
    position: absolute;
    left: 55%;
    -webkit-animation: drop 13533ms linear 733ms infinite;
            animation: drop 13533ms linear 733ms infinite;
  }
  div.code-container div#matrix-code p.code-56 {
    position: absolute;
    left: 56%;
    -webkit-animation: drop 10589ms linear 325ms infinite;
            animation: drop 10589ms linear 325ms infinite;
  }
  div.code-container div#matrix-code p.code-57 {
    position: absolute;
    left: 57%;
    -webkit-animation: drop 14923ms linear 179ms infinite;
            animation: drop 14923ms linear 179ms infinite;
  }
  div.code-container div#matrix-code p.code-58 {
    position: absolute;
    left: 58%;
    -webkit-animation: drop 1037ms linear 167ms infinite;
            animation: drop 1037ms linear 167ms infinite;
  }
  div.code-container div#matrix-code p.code-59 {
    position: absolute;
    left: 59%;
    -webkit-animation: drop 12227ms linear 704ms infinite;
            animation: drop 12227ms linear 704ms infinite;
  }
  div.code-container div#matrix-code p.code-60 {
    position: absolute;
    left: 60%;
    -webkit-animation: drop 9789ms linear 422ms infinite;
            animation: drop 9789ms linear 422ms infinite;
  }
  div.code-container div#matrix-code p.code-61 {
    position: absolute;
    left: 61%;
    -webkit-animation: drop 7774ms linear 867ms infinite;
            animation: drop 7774ms linear 867ms infinite;
  }
  div.code-container div#matrix-code p.code-62 {
    position: absolute;
    left: 62%;
    -webkit-animation: drop 1037ms linear 834ms infinite;
            animation: drop 1037ms linear 834ms infinite;
  }
  div.code-container div#matrix-code p.code-63 {
    position: absolute;
    left: 63%;
    -webkit-animation: drop 2129ms linear 498ms infinite;
            animation: drop 2129ms linear 498ms infinite;
  }
  div.code-container div#matrix-code p.code-64 {
    position: absolute;
    left: 64%;
    -webkit-animation: drop 14227ms linear 874ms infinite;
            animation: drop 14227ms linear 874ms infinite;
  }
  div.code-container div#matrix-code p.code-65 {
    position: absolute;
    left: 65%;
    -webkit-animation: drop 5647ms linear 889ms infinite;
            animation: drop 5647ms linear 889ms infinite;
  }
  div.code-container div#matrix-code p.code-66 {
    position: absolute;
    left: 66%;
    -webkit-animation: drop 5455ms linear 890ms infinite;
            animation: drop 5455ms linear 890ms infinite;
  }
  div.code-container div#matrix-code p.code-67 {
    position: absolute;
    left: 67%;
    -webkit-animation: drop 2075ms linear 171ms infinite;
            animation: drop 2075ms linear 171ms infinite;
  }
  div.code-container div#matrix-code p.code-68 {
    position: absolute;
    left: 68%;
    -webkit-animation: drop 3496ms linear 715ms infinite;
            animation: drop 3496ms linear 715ms infinite;
  }
  div.code-container div#matrix-code p.code-69 {
    position: absolute;
    left: 69%;
    -webkit-animation: drop 12800ms linear 602ms infinite;
            animation: drop 12800ms linear 602ms infinite;
  }
  div.code-container div#matrix-code p.code-70 {
    position: absolute;
    left: 70%;
    -webkit-animation: drop 4969ms linear 281ms infinite;
            animation: drop 4969ms linear 281ms infinite;
  }
  div.code-container div#matrix-code p.code-71 {
    position: absolute;
    left: 71%;
    -webkit-animation: drop 8915ms linear 395ms infinite;
            animation: drop 8915ms linear 395ms infinite;
  }
  div.code-container div#matrix-code p.code-72 {
    position: absolute;
    left: 72%;
    -webkit-animation: drop 9995ms linear 858ms infinite;
            animation: drop 9995ms linear 858ms infinite;
  }
  div.code-container div#matrix-code p.code-73 {
    position: absolute;
    left: 73%;
    -webkit-animation: drop 9750ms linear 914ms infinite;
            animation: drop 9750ms linear 914ms infinite;
  }
  div.code-container div#matrix-code p.code-74 {
    position: absolute;
    left: 74%;
    -webkit-animation: drop 12807ms linear 772ms infinite;
            animation: drop 12807ms linear 772ms infinite;
  }
  div.code-container div#matrix-code p.code-75 {
    position: absolute;
    left: 75%;
    -webkit-animation: drop 9583ms linear 293ms infinite;
            animation: drop 9583ms linear 293ms infinite;
  }
  div.code-container div#matrix-code p.code-76 {
    position: absolute;
    left: 76%;
    -webkit-animation: drop 9968ms linear 985ms infinite;
            animation: drop 9968ms linear 985ms infinite;
  }
  div.code-container div#matrix-code p.code-77 {
    position: absolute;
    left: 77%;
    -webkit-animation: drop 10388ms linear 808ms infinite;
            animation: drop 10388ms linear 808ms infinite;
  }
  div.code-container div#matrix-code p.code-78 {
    position: absolute;
    left: 78%;
    -webkit-animation: drop 4939ms linear 993ms infinite;
            animation: drop 4939ms linear 993ms infinite;
  }
  div.code-container div#matrix-code p.code-79 {
    position: absolute;
    left: 79%;
    -webkit-animation: drop 9138ms linear 365ms infinite;
            animation: drop 9138ms linear 365ms infinite;
  }
  div.code-container div#matrix-code p.code-80 {
    position: absolute;
    left: 80%;
    -webkit-animation: drop 7047ms linear 427ms infinite;
            animation: drop 7047ms linear 427ms infinite;
  }
  div.code-container div#matrix-code p.code-81 {
    position: absolute;
    left: 81%;
    -webkit-animation: drop 8097ms linear 676ms infinite;
            animation: drop 8097ms linear 676ms infinite;
  }
  div.code-container div#matrix-code p.code-82 {
    position: absolute;
    left: 82%;
    -webkit-animation: drop 11563ms linear 419ms infinite;
            animation: drop 11563ms linear 419ms infinite;
  }
  div.code-container div#matrix-code p.code-83 {
    position: absolute;
    left: 83%;
    -webkit-animation: drop 2670ms linear 427ms infinite;
            animation: drop 2670ms linear 427ms infinite;
  }
  div.code-container div#matrix-code p.code-84 {
    position: absolute;
    left: 84%;
    -webkit-animation: drop 1168ms linear 411ms infinite;
            animation: drop 1168ms linear 411ms infinite;
  }
  div.code-container div#matrix-code p.code-85 {
    position: absolute;
    left: 85%;
    -webkit-animation: drop 9575ms linear 886ms infinite;
            animation: drop 9575ms linear 886ms infinite;
  }
  div.code-container div#matrix-code p.code-86 {
    position: absolute;
    left: 86%;
    -webkit-animation: drop 13880ms linear 182ms infinite;
            animation: drop 13880ms linear 182ms infinite;
  }
  div.code-container div#matrix-code p.code-87 {
    position: absolute;
    left: 87%;
    -webkit-animation: drop 1683ms linear 812ms infinite;
            animation: drop 1683ms linear 812ms infinite;
  }
  div.code-container div#matrix-code p.code-88 {
    position: absolute;
    left: 88%;
    -webkit-animation: drop 14697ms linear 717ms infinite;
            animation: drop 14697ms linear 717ms infinite;
  }
  div.code-container div#matrix-code p.code-89 {
    position: absolute;
    left: 89%;
    -webkit-animation: drop 8928ms linear 855ms infinite;
            animation: drop 8928ms linear 855ms infinite;
  }
  div.code-container div#matrix-code p.code-90 {
    position: absolute;
    left: 90%;
    -webkit-animation: drop 4574ms linear 996ms infinite;
            animation: drop 4574ms linear 996ms infinite;
  }
  div.code-container div#matrix-code p.code-91 {
    position: absolute;
    left: 91%;
    -webkit-animation: drop 2319ms linear 140ms infinite;
            animation: drop 2319ms linear 140ms infinite;
  }
  div.code-container div#matrix-code p.code-92 {
    position: absolute;
    left: 92%;
    -webkit-animation: drop 10537ms linear 594ms infinite;
            animation: drop 10537ms linear 594ms infinite;
  }
  div.code-container div#matrix-code p.code-93 {
    position: absolute;
    left: 93%;
    -webkit-animation: drop 1633ms linear 733ms infinite;
            animation: drop 1633ms linear 733ms infinite;
  }
  div.code-container div#matrix-code p.code-94 {
    position: absolute;
    left: 94%;
    -webkit-animation: drop 10040ms linear 344ms infinite;
            animation: drop 10040ms linear 344ms infinite;
  }
  div.code-container div#matrix-code p.code-95 {
    position: absolute;
    left: 95%;
    -webkit-animation: drop 12425ms linear 535ms infinite;
            animation: drop 12425ms linear 535ms infinite;
  }
  div.code-container div#matrix-code p.code-96 {
    position: absolute;
    left: 96%;
    -webkit-animation: drop 12003ms linear 332ms infinite;
            animation: drop 12003ms linear 332ms infinite;
  }
  div.code-container div#matrix-code p.code-97 {
    position: absolute;
    left: 97%;
    -webkit-animation: drop 7547ms linear 475ms infinite;
            animation: drop 7547ms linear 475ms infinite;
  }
  div.code-container div#matrix-code p.code-98 {
    position: absolute;
    left: 98%;
    -webkit-animation: drop 2479ms linear 203ms infinite;
            animation: drop 2479ms linear 203ms infinite;
  }
  div.code-container div#matrix-code p.code-99 {
    position: absolute;
    left: 99%;
    -webkit-animation: drop 1708ms linear 817ms infinite;
            animation: drop 1708ms linear 817ms infinite;
  }
  
  @-webkit-keyframes drop {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(20%);
    }
  }
  
  @keyframes drop {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(20%);
    }
  }

  .example {
      border-radius: 15px;
  }